<template>
  <div class='container'>
 <el-dialog
  :title="title"
  :visible="dialogVisible"
  width="30%"
  @close='closeDialog'
  @open='openDilong'
  >
  <el-form ref="form" :model="form" :rules="rules" >
  <el-form-item label="学科名称" label-width="80px" prop="subjectName">
    <el-input placeholder="请输入学科名称" v-model="form.subjectName" ></el-input>
  </el-form-item>
  <el-form-item  label="是否显示"  label-width="80px">
    <el-switch :active-value=1 :inactive-value=0  v-model="form.isFrontDisplay" ></el-switch>
  </el-form-item>
</el-form>

  <span slot="footer" class="dialog-footer">
    <el-button @click="closeDialog" >取 消</el-button>
    <el-button type="primary" @click.stop="addSubjects">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import { add, detail, update } from '@/api/hmmm/subjects.js'

export default {
  name: 'AddSubjects',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      form: {
        subjectName: '', // 学科名称
        isFrontDisplay: '' // 是否显示
        // id: ''
      },
      rules: {
        subjectName: [
          { required: true, message: '请输入学科名', trigger: ['blur', 'change'] }
        ],
        isFrontDisplay: [
          { required: true, message: '请选择显示', trigger: 'change' }
        ]
      },
      title: '新增'

    }
  },
  methods: {
    // 关闭对话框
    closeDialog () {
      this.$emit('update:dialogVisible', false)
      // 清空对话框
      this.$refs.form.resetFields()
      // console.log(this.row)
      this.form = {
        subjectName: '', // 学科名称
        isFrontDisplay: ''// 是否显示
      }
    },

    // 新增学科
    addSubjects () {
      // if (this.form.id) {
      //   this.title = '修改'

      //   const res = await update(this.form)
      //   console.log(res)
      // } else {
      //   this.title = '新增'
      //   // 表单预校验
      //   this.$refs.form.validate(async boo => {
      //     if (boo) {
      //       // 携带参数发情求
      //       // console.log(1)
      //       // console.log(this.form)
      //       const res = await add(this.form)
      //       console.log(res)
      //       // 关闭对话框
      //     }
      //   })
      // }

      this.$refs.form.validate(async boo => {
        if (boo) {
          if (this.form.id) {
            this.title = '修改'
            const str = await this.$confirm('此操作将修改该学科名, 是否继续?', '提示', {
              type: 'warning'
            }).catch(() => {})
            if (str !== 'confirm') return this.$message('已取消修改')
            await update(this.form)
            this.$message.success('已修改成功')
            // this.closeDialog()
            // this.$emit('reload')
          } else {
            this.title = '新增学科'
            const strTwo = await this.$confirm('此操作将新增该学科, 是否继续?', '提示', {
              type: 'warning'
            }).catch(() => {})
            if (strTwo !== 'confirm') return this.$message('已取消新增')
            await add(this.form)
            this.$message.success('已新增成功')
            // this.closeDialog()
            // this.$emit('reload')
          }
          this.closeDialog()
          // 重新渲染 通知父组件重新渲染
          this.$emit('reload')
        }
      })
    },
    async openDilong () {
      if (this.row.username) {
        // 如果有username则表示进入修改提示框,name发请求回显
        // 发送请求
        const { data } = await detail(this.row)
        console.log(data)
        this.form = data
      }
    }

  }
}
</script>

<style scoped lang='less'></style>
